<template>
	<view class="content">
		<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"  @click="tabClick(index)">
				<view style="padding-bottom: 10rpx;" :style="{borderBottom:tabCurrentIndex==index?'1px solid #333333':''}"><text :style="{fontWeight:tabCurrentIndex==index?'bold':''}">{{item.text}}</text><text v-if="item.num>0" :style="{fontWeight:tabCurrentIndex==index?'bold':''}">({{item.num}}件)</text></view>
			</view>
		</view>
		
		<view  :class="{listContent:orderList.length>0}" >
			<view class="course_content" v-if="loaded&&orderList.length==0">暂无数据</view>
				<scroll-view  v-else scroll-y @scrolltolower="loadData" :style="{height:screenHeight}">
				<view class="list-item" v-for="(item, index) in orderList" :key="index">
					
					<view class="dis-flex">
						<view class="list-img">
							<image :src="item.pics[0]" mode="aspectFill" ></image>
						</view>
						<view class="list-title" >
							<view class="list-title-name" >{{item.title}}</view>
							<view class="list-detail" >
								<view style="flex: 1;">销量：{{item.order_count}}</view>
								<view class="pad-r22" style="flex:1">库存：{{item.qty}}</view>
							</view>
							<view class="list-op">
								<view style="display: flex;flex: 1;">
									<view class="font-w600">{{item.score}}积分</view>
								</view>
								<view class="estimate" v-if="item.status==1" @click="openEstimate(item.id,0)">下架</view>
								<view class="estimate" v-if="item.status==0" @click="openEstimate(item.id,1)">上架</view>
							</view>
						</view>
					</view>
					
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>		
		</view>
	
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				shop_id:0,
				page: 1,
				size: 10,
				more_data: true,
				loaded:false,
				tabCurrentIndex: 0,
				orderList: [],
				loadingType: 'more',
				navList: [{
						state: 1,
						text: '在售中',
						num: 0
					},
					{
						state: 0,
						text: '未上架',
						num: 0
					}

				],
			};
		},
		computed:{
			screenHeight: function() {
			    return (uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.getSystemInfoSync().statusBarHeight-80)+'px';
			}  
		},
		onLoad(options) {
			this.shop_id=options.shop_id;
			this.loadData()
			this.loadStatics();
		},
		onShow(){
			
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
		},
		methods: {
		
		   async openEstimate(id,status){
				let that = this;
				let _tag =status==0?'下架':'上架';
				let content ='确认'+_tag+'该商品吗'
				uni.showModal({
					title:'提示',
				    content: content,
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {shop_id:that.shop_id,goods_id:id,state:status};
							let data = await Api.apiCall('post', Api.apiName.shop_goods_updown, params);
				    		if (!data || !data.data) {
				    			return;
				    		}
							let index = that.orderList.findIndex(obj => obj.id == id);
							that.orderList[index].status=status;
							that.loadStatics()
							that.$api.msg(`操作成功`)
							
				    	}
				    }
				});
				
			},			
		
			//获取订单列表
			async loadData() {
				if (!this.more_data) {
					return; //没有数据不请求
				}
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;

				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				this.loadingType = 'loading';
				let params = {
					shop_id:this.shop_id,
					page: this.page,
					size: this.size,
					state: state,
				};
				let data = await Api.apiCall('get', Api.apiName.shop_goods, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}

				setTimeout(() => {

					this.orderList = this.orderList.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'nomore';
						this.more_data = false;

					}

				}, 600);
			},

			//顶部tab点击
			tabClick(index) {
				this.page = 1;
				this.loaded = false;
				this.orderList = [];
				this.tabCurrentIndex = index;
				this.more_data = true;
				this.loadData();
			},
			
		
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			// 获取订单统计
			async loadStatics(showload=true) {
				
				let params = {shop_id:this.shop_id};
				let data = await Api.apiCall('get', Api.apiName.shop_goods_statics, params,showload);
				if (!data) { //出错时
					return;
				}
				let res = data.data;
				if(res.length>0){
					this.navList.map((item,index)=>{
						res.map((_item,_index)=>{
							if(item.state==_item.status){
								item.num=_item.total;
								return;
							}
						})
					})		
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.content {
		height: 99vh;
	}
	.dis-flex{
		display: flex;
	}
	.navbar {
		display: flex;
		height: 100rpx;
		padding: 12rpx 30rpx;
		white-space: nowrap;
		overflow-x: scroll;
		background: #FFFFFF;
		margin-top: 2rpx;
		position: relative;
		z-index: 10;

		.nav-item {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 0rpx 30rpx;
			position: relative;
			flex-direction: column;
			width: 50%;
			justify-content: center;
		}
	}

	.diyCurrent {
		font-weight: 600;
	}

	.diyCurrent::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 23%;
		width: 50%;
		/* 或者你希望的特定长度 */
		height: 2px;
		/* 边框线的高度 */
		background: #0191FF;

	}

	.navbar::-webkit-scrollbar {
		display: none;
	}
	.show_border{
		border: 1px solid #0191FF;
		width: 37%;
		height: 2rpx;
	}
	.ms-num {
		position: absolute;
		top: 14rpx;
		right: 0rpx;
		font-size: 16rpx;
		border-radius: 50%;
		width: 26rpx;
		height: 26rpx;
		background: #FF0000;
		line-height: 26rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.listContent {
		padding: 4rpx;
	}
	.course_content{
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 12rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}

	.list-img {
		// padding: 20rpx;
		margin: 20rpx;
		width: 252rpx;
		height: 252rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}

	.list-title {
		// margin-left: 20rpx;
		// margin-top: 30rpx;
		margin: 20rpx;
		font-size: 14px;
		width:100%;
	}

	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		width: 414rpx;
	}

	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 34rpx;
	}
	.list-op {
		margin-top: 34rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
	.estimate{
		border: 1px solid #666666;
		color: #333333;
		border-radius: 20rpx;
		padding: 4rpx 20rpx;
		font-size: 24rpx;
	}
	
	.uni-rate{
		margin-left: 20rpx;
	}
</style>